﻿var outByDay=456,
    outByYesterDay=6523,
    outByWeek=25693,
    outByMonth=896532,
    outByAll=8596235,
    borrowIndex=0,///数字变化
    borrowloopTime=14,
    borrowTimer = null,
    Chart1 = null,//上面折线图
    ChartTimer1 = null,
    chartIndex1 = 0,
    chartLoopTime1 = 15,
    Chart2 = null,//下面折线图
    ChartTimer2 = null,
    chartIndex2 = 0,
    chartLoopTime2 = 12,
    currentFontSize,
///////2018.11.13添加代码
    backByDay=563,
    backByYesterDay=4563,
    backByWeek=25632,
    backByMonth=96325,
    backByAll=7896523,
    XAxis=[],///借出x轴数据
    seriesData1=[],///借出数据
    seriesData2=[],///还入数据
    initArr=[
        {"date":"11月13日","borrowOut":865,"borrowIn":963},
        {"date":"11月12日","borrowOut":963,"borrowIn":842},
        {"date":"11月11日","borrowOut":802,"borrowIn":1023},
        {"date":"11月10日","borrowOut":844,"borrowIn":1200},
        {"date":"11月09日","borrowOut":999,"borrowIn":1111},
        {"date":"11月08日","borrowOut":1000,"borrowIn":1023},
        //{"date":"11月07日","borrowOut":888,"borrowIn":1023},
    ];////模拟后台返回的数据结构
window.onresize = function() {
    currentFontSize = getRem(100, 1246);
    Chart1.setOption(getOption1(), true);
    Chart1.resize();
    Chart2.setOption(getOption2(), true);
    Chart2.resize();
};
window.onload = function() {
    currentFontSize = getRem(100, 1246);
    /////调用初始化构造函数,第一个参数是模拟数据最大值，第二个是最小值，第三个是后台返回的数据结构  数组
    createInitData(1000,800,initArr);/////2018年添加代码

    ////上面折线图
    Chart1 = echarts.init(document.getElementById('chart1'));
    Chart1.setOption(getOption1(), true);
    chart_move1();
    ///下面折线图
    Chart2 = echarts.init(document.getElementById('chart2'));
    Chart2.setOption(getOption2(), true);
    chart_move2();
    ////借阅数字变化
    initNumberMove();
    borrow_num_move();

};
////2018.11.13添加代码
///构造初始化数据  maxNum模拟数据最大值, minNum模拟数据最小值
function createInitData(maxNum,minNum,initArr){
    ///如果返回的数据小于7条就执行初始好功能
    if(initArr.length<7){
        console.log('折线图小于七条开始补数据');

        for (var i =7; i >initArr.length; i--) {
            var borrowOut = parseInt(Math.random() * (maxNum - minNum+ 1) + minNum);///产生随机数
            var borrowIn = parseInt(Math.random() * (maxNum - minNum + 2) + minNum);///产生随机数
            XAxis.push(getBeforeDate(-i));
            seriesData1.push(borrowOut);
            seriesData2.push(borrowIn);
        }
    }
    for (var j = 0; j <initArr.length; j++) {
        XAxis.push(initArr[j].date);///x轴名字
        seriesData1.push(initArr[j].borrowOut);///借出数据
        seriesData2.push(initArr[j].borrowIn);///还入数据
    }
}


//曲线图动效函数 上面
function chart_move1() {
    if(!!window.ChartTimer1) cancelAnimationFrame(window.ChartTimer1);
    if(chartIndex1 >= (chartLoopTime1 * 60)) {
        chartIndex1 = 0;
        Chart1.dispose();
        Chart1 = echarts.init(document.getElementById('chart1'));
        Chart1.setOption(getOption1(), true);
    }
    chartIndex1++;
    window.ChartTimer1 = requestAnimationFrame(chart_move1);
}
//曲线图动效函数 下面
function chart_move2() {
    if(!!window.ChartTimer2) cancelAnimationFrame(window.ChartTimer2);
    if(chartIndex2 >= (chartLoopTime2 * 60)) {
        chartIndex2 = 0;
        Chart2.dispose();
        Chart2 = echarts.init(document.getElementById('chart2'));
        Chart2.setOption(getOption2(), true);
    }
    chartIndex2++;
    window.ChartTimer2 = requestAnimationFrame(chart_move2);
}
//数字动效函数
function borrow_num_move() {
    if(!!window.borrowTimer) cancelAnimationFrame(window.borrowTimer);
    if(borrowIndex >= (borrowloopTime * 60)) {
        borrowIndex = 0;
        initNumberMove();////2018.11.13添加代码
    }
    borrowIndex++;
    window.borrowTimer = requestAnimationFrame(borrow_num_move);
}
////2018.11.13添加代码
function initNumberMove(){
    ///借出
    new CountUp($("#borrow_todayNum"), 0, outByDay, 0, 4).start();
    new CountUp($("#borrow_yesterdayNum"), 0, outByYesterDay, 0, 4).start();
    new CountUp($("#borrow_weekNum"), 0, outByWeek, 0, 4).start();
    new CountUp($("#borrow_monthNum"), 0, outByMonth, 0, 4).start();
    new CountUp($("#borrow_totalNum"), 0, outByAll, 0, 4).start();
    ///还入
    new CountUp($("#back_todayNum"), 0, backByDay, 0, 4).start();
    new CountUp($("#back_yesterdayNum"), 0, backByYesterDay, 0, 4).start();
    new CountUp($("#back_weekNum"), 0, backByWeek, 0, 4).start();
    new CountUp($("#back_monthNum"), 0, backByMonth, 0, 4).start();
    new CountUp($("#back_totalNum"), 0, backByAll, 0, 4).start();


}

//曲线echart配置项 上面
function getOption1() {
    return {
        backgroundColor:'rgba(174,132,240,.05)',//rgba设置透明度0.1
        title: {
            text: '今日借还书曲线',
            x:"center",
            textStyle: {
                color: '#fff',
                fontSize:20 * currentFontSize / 100,
                letterSpace:3
            },
            padding: [42*currentFontSize / 100, 0, 0, 0]
        },
        tooltip: {
            trigger: 'axis',
            show: false
        },
        legend: {
            data: ['借出', '还入'],
            x: 'right',
            itemWidth: 8 * currentFontSize / 100, // 图例图形宽度
            itemHeight: 8 * currentFontSize / 100,
            textStyle: {
                color: '#b6b2cf',
                fontSize: 12 * currentFontSize / 100,
            },
            padding: [50 * currentFontSize / 100, 30 * currentFontSize / 100, 0, 0]
        },
        grid: {
            x: '7%',
            x2: '4%',
            y: '18%',
            y2: '10%'
        },
        color: ['#00fe88', '#f0ff00'], ///借出还入曲线颜色
        calculable: true,
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)',
                    width: 1 * currentFontSize / 100
                },
                onZero: true
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)'
                },
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 16 * currentFontSize / 100,
                }
            },
            data: ["8点","9点","10点","11点","12点","13点","14点","15点"]
        },
        yAxis: [{
            type: 'value',
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)',
                    width: 1 * currentFontSize / 100
                }
            },
            boundaryGap: true,
            splitLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)'
                }
            },
            axisLabel: {
                show: true,
                formatter: '{value}',
                textStyle: {
                    color: '#fff',
                    fontSize: 16 * currentFontSize / 100,
                }
            }
        }],
        series: [{
            name: '借出',
            type: 'line',
            symbolSize: 6 * currentFontSize / 100,
            smooth: true,
            symbol: "circle",
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        fontSize: 16 * currentFontSize / 100,
                    }
                }
            },
            animationDelay: function(idx) {
                return idx * 10 + 100;
            },
            itemStyle: {
                normal: {
                    lineStyle: {
                        type: 'solid'
                    }
                }
            },
            data: [124,236,365,456,589,698,785,,]
        },
            {
                name: '借出',
                type: 'line',
                symbolSize: 6 * currentFontSize / 100,
                smooth: false, //关键点，为true是不支持虚线，实线就用true
                symbol: "circle",
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            fontSize: 16 * currentFontSize / 100,
                        }
                    }
                },
                animationDelay: function(idx) {
                    return idx * 10 + 100;
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 2 * currentFontSize / 100,
                            type: 'dotted' //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data: [ , , , , , ,785,785]
            },
            {
                name: '还入',
                type: 'line',
                symbolSize: 6 * currentFontSize / 100,
                smooth: true,
                symbol: "circle",
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize: 16 * currentFontSize / 100
                        }
                    }
                },
                animationDelay: function(idx) {
                    return idx * 10 + 100;
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            type: 'solid'
                        }
                    }
                },
                data: [256,356,478,569,658,856,962,,]
            },
            {
                name: '还入',
                type: 'line',
                symbolSize: 6 * currentFontSize / 100,
                smooth: false, //关键点，为true是不支持虚线，实线就用true
                symbol: "circle",
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize: 16 * currentFontSize / 100
                        }
                    }
                },
                animationDelay: function(idx) {
                    return idx * 10 + 100;
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 2,
                            type: 'dotted' //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data: [ , , , , , ,962,962]
            },
        ]
    };
}
//曲线echart配置项 下面
function getOption2() {
    return {
        backgroundColor:'rgba(174,132,240,.05)',//rgba设置透明度0.1
        title: {
            text: '近\n七\n日\n借\n还\n趋\n势',
            x:"left",
            textStyle: {
                color: '#fff',
                fontSize:22 * currentFontSize / 100,
                fontWeight:'100',
            },
            padding: [115*currentFontSize / 100, 0, 0, 30*currentFontSize / 100]
        },
        tooltip: {
            trigger: 'axis',
            show: false
        },
        legend: {
            data: ['借出趋势', '还入趋势'],
            x: 'right',
            itemWidth: 13 * currentFontSize / 100, // 图例图形宽度
            itemHeight: 5 * currentFontSize / 100,
            textStyle: {
                color: '#b6b2cf',
                fontSize: 16 * currentFontSize / 100,
            },
            padding: [26 * currentFontSize / 100, 30 * currentFontSize / 100, 0, 0]
        },
        grid: {
            x: '9%',
            x2: '4%',
            y: '18%',
            y2: '12%'
        },
        color: ['#00fe88', '#4ebafb'], ///借出还入曲线颜色
        calculable: true,
        xAxis: {
            type: 'category',
//                name: '9月',
//                nameLocation: 40,
//                nameTextStyle: {
//                    color: '#fff',
//                    fontSize: 16
//                },
            boundaryGap:false,
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(0,254,136,.5)',
                    width: 1 * currentFontSize / 100
                },
                onZero: true
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)'
                },
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 16 * currentFontSize / 100,
                }
            },
            //data: ["9月23日","9月24日","9月25日","10月1日","10月2日","10月3日","10月4日"]
            data: XAxis

        },
        yAxis: [{
            type: 'value',
//                offset:40,
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(0,254,136,.5)',
                    width: 1 * currentFontSize / 100
                }
            },
            axisTick: {
                show: false
            },
            boundaryGap: false,
            splitLine: {
                show:false,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)'
                }
            },
            axisLabel: {
                show: false,
                formatter: '{value}',
                textStyle: {
                    color: '#fff',
                    fontSize: 16 * currentFontSize / 100,
                }
            }
        }],
        series: [{
            name: '借出趋势',
            type: 'line',
            symbolSize: 6 * currentFontSize / 100,
//                smooth: true,
            symbol: "",
            areaStyle: {// 设置折线下面的面积颜色
                normal: {
                    // 后面有6个参数
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [{offset: 0, color: 'rgba(0,254,136,0.5)'  },// 0% 处的颜色
                            {offset: 1, color: 'rgba(0,254,136,0)' }// 100% 处的颜色
                        ], false)
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        fontSize: 16 * currentFontSize / 100,
                    }
                }
            },
            animationDelay: function(idx) {
                return idx * 10 + 100;
            },
            itemStyle: {
                normal: {
                    lineStyle: {
                        type: 'solid'
                    }
                }
            },
            data: seriesData1
        },
            {
                name: '还入趋势',
                type: 'line',
                symbolSize: 6 * currentFontSize / 100,
//                    smooth: true,
                symbol: "",
                areaStyle: {// 设置折线下面的面积颜色
                    normal: {
                        // 后面有6个参数
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [{offset: 0, color: 'rgba(78,186,251,0.5)'  },// 0% 处的颜色
                                {offset: 1, color: 'rgba(78,186,251,0)' }// 100% 处的颜色
                            ], false)
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                            fontSize: 16 * currentFontSize / 100
                        }
                    }
                },
                animationDelay: function(idx) {
                    return idx * 10 + 100;
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            type: 'solid'
                        }
                    }
                },
                data: seriesData2
            },
        ]
    };
}

